import React, { Component } from 'react'
import { Route, Switch, NavLink, Redirect } from "react-router-dom"
import "./index.less"
import Header from '../../components/Header/Header'

import Home from "../home/Home"
import cate from "../cate/cate"
import shop from "../shop/shop"
import Mine from "../mine/Mine"

export default class index extends Component {
  render() {
    return (
      <div className='index'>
        <Header title="首页"></Header>
        {/* 二级路由视图 */}
        <Switch>
          <Route path="/index/home" component={Home}></Route>
          <Route path="/index/cate/:id" component={cate}></Route>
          <Route path="/index/shop" component={shop}></Route>
          <Route path="/index/mine" component={Mine}></Route>
          {/*Redirect 重定向 */}
          <Redirect to="/index/home"></Redirect>
        </Switch>

        {/* 底部导航 */}
        <footer>
          <NavLink activeClassName='active' to="/index/home">
            <i className='iconfont icon-shouye'></i>
            <div>首页</div>
          </NavLink>
          <NavLink activeClassName='active' to="/index/cate">
            <i className='iconfont icon-fenlei'></i>
            <div>分类</div>
          </NavLink>
          <NavLink activeClassName='active' to="/index/shop">
            <i className='iconfont icon-gouwucheman'></i>
            <div>购物车</div>
          </NavLink>
          <NavLink activeClassName='active' to="/index/mine">
            <i className='iconfont icon-wode'></i>
            <div>我的</div>
          </NavLink>
        </footer>
      </div>
    )
  }
}
